<template>
    <div class="movie_body" ref ="movie_body">
        <loading v-if="isLoading" />
            <scroller v-else :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">   
                <ul class="movie_list">
                    <li class="pullDown">
                        {{ pullDownMsg }}
                    </li>
                    <li v-for="item in hotMoviesList" :key="item.id">
                        <div @tap="handleToDetail(item.id)" class="movie_poster">
                            <!-- 全局过滤器自定义宽高，里面加引号，防止图片失真--> 
                            <!-- <img :src="item.img | setWH('128.180')">  -->
                            <img v-lazy="$picFix(item.img, '128.180')" alt="">
                        </div>
                        <div class="info_list">
                            <h2 @tap="handleToDetail(item.id)">
                                {{ item.nm }}
                                <img v-if="item.version" src="@/assets/maxs.png"> 
                            </h2>
                            <p>观众评 <span class="grade">{{ item.sc }}</span></p>
                            <p>主演: {{item.star }}</p>
                            <p>{{ item.showInfo }}</p>
                        </div>
                        <div class="btn_mall">
                            购票
                        </div>
                    </li>
                </ul>
            </scroller>
    </div>

</template>

<script>
export default {
    name: 'HotShowing',
    data () {
        return {
            hotMoviesList: [],
            pullDownMsg : '',
            isLoading: true,
            prevCityId : -1
        }
    },
    methods: {
        handleToDetail (movieId) {
            // console.log(movieId)
            this.$router.push('/movie/movieDetail/1/' + movieId)
        },
        handleToScroll (pos) {
            if(pos.y > 30){ // y轴拖拽的距离
                this.pullDownMsg = '正在更新'
            }
        },
        handleToTouchEnd (pos) {
            if( pos.y > 30 ) {
                this.$axios.get('/api/movieOnInfoList?cityId=11')
                .then(res => {
                    const msg = res.data.msg
                    const hotMovieData = res.data.data
                    if(msg === 'ok'){
                        this.pullDownMsg = '更新成功'
                        setTimeout( () => {
                            this.hotMoviesList = hotMovieData.movieList
                            this.pullDownMsg = ''
                        },1000)
                    }
                })
            }
        }
    },
    activated () {
        const cityId = this.$store.state.city.id
        if (this.prevCityId === cityId) {return}
        this.isLoading = true 

        this.$axios.get('/api/movieOnInfoList?cityId=' + cityId)
        .then(res => {
            console.log(res)
            const msg = res.data.msg
            const hotMovieData = res.data.data
            if (msg === 'ok') {
                this.hotMoviesList = hotMovieData.movieList
                this.isLoading = false
                this.prevCityId = cityId
            }
        })
    }
}
</script>

<style lang="scss" scoped>
#content {
    .movie_body {
        flex: 1;
        overflow: auto;
        .movie_list {
            overflow: hidden;
            margin: 0 12px;
            .pullDown {
                padding: 0;
                margin: 0;
                border: none;
            }
            li {
                margin-top: 12px; 
               @include flex-align;
                border-bottom: 1px solid $bdColor;
                padding-top: 10px;
                .movie_poster {
                    width: 64px;
                    height: 90px;
                    img {
                        width: 100%;
                    }
                }
                .info_list {
                    position: relative;
                    margin-left: 10px; 
                    flex: 1; 
                    h2 {
                        width:150px;
                        font-size: 17px; 
                        line-height: 24px; 
                        @include text-emphasis;
                        img {
                            position: absolute; 
                            right: 10px; 
                            top: 5px;
                            width: 50px;
                        }
                    }
                    p {
                        width: 200px;
                        line-height: 22px;
                        font-size: 13px; 
                        color: #666; 
                        @include text-emphasis;
                        .grade {
                            font-weight: 700; 
                            color: #faaf00; 
                            font-size: 15px;
                        }
                    }
                }
                .btn_mall {
                    width: 47px; 
                    height: 27px; 
                    line-height: 28px; 
                    text-align: center; 
                    background-color: #f03d37; 
                    color: $color; 
                    border-radius: 4px; 
                    font-size: 12px; 
                    cursor: pointer;
                }
            }
        }
    }
}
</style>


